<!-- 统计组件 -->
<template>
    <div id='statistical_container'>
        <div class="title">
            平台数据统计
            <hr>
        </div>
        <div ref="chart" class="chart_box"></div>
    </div>
    <!-- 物品表格数据统计 -->
    <div id="statistical_table">
        <hr>
        <div class="title">
            物品数据统计
        </div>
        <!-- 表格组件 -->
        <el-table :data="tableData" border stripe style="width: 100%" max-height="250">
            <el-table-column type="index" width="50" />
            <el-table-column prop="name" label="物品" align="center"/>
            <el-table-column prop="value" label="查询次数" align="center"/>
        </el-table>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
import axios from 'axios';

// 表格参数
let tableData = ref([]); // 表格数据
let tableWidth = ref(180); // 宽度

// 饼图容器
let chart = ref(null);
let cahrtObj = ref(null);
// 饼图数据
let chartData = ref(  // 默认显示数据
[
    { value: 1048, name: '可回收垃圾' },
    { value: 735, name: '有害垃圾' },
    { value: 580, name: '厨余垃圾' },
    { value: 484, name: '其他垃圾' }
]);

onMounted(() => {
    initEcharts(); // 初始化echarts
    getTableData(); // 获取表格数据
});

// 获取表格数据
async function getTableData() {
    try {
        const res = await axios.get('http://localhost:9090/statistical/countByItem');
        tableData.value = res.data;
        console.log("表格数据:", res.data);
        
    } catch (error) {
        console.log(error);
    }
}

// 获取图表数据
async function getChartData() {
    try {
        const res = await axios.get('http://localhost:9090/statistical/countByResult');
        chartData.value = res.data;
        console.log(chartData.value, "====2");

        updateChartData(res.data); // 数据更新后调用图表更新
    } catch (error) {
        console.log(error);
    }
}

// 初始化图标
function initEcharts() {
    cahrtObj.value = echarts.init(chart.value);
    const option = {
        title: {
            text: '垃圾分类查询统计',
            subtext: '数据来源本平台',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                name: '垃圾分类',
                type: 'pie',
                radius: '50%',
                data: chartData.value,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    cahrtObj.value.setOption(option);
    getChartData(); // 动态获取数据
}

// 仅更新图表数据
const updateChartData = (dataG) => {
    console.log("更新数据", dataG);
    cahrtObj.value.setOption({
        series: [{
            data: dataG // 动态绑定最新数据
        }]
    });
}

// 重新获取数据 - 暴露的方法
const reGetChartData = () => {
    getChartData();
}

// 给父组件暴露更新方法
defineExpose({
    reGetChartData
})

</script>
<style scoped>
.title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 20px;
}

.chart_box {
    width: 100%;
    height: 400px;
}

.statistical_table{
    height: 400px;
    border: solid red 1px;
}
</style>